<template>
    <div class="pollution-page">
        <el-dialog title="污染数据" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <div class="search-box">
                <span style="margin: 0 10px;"> 年份 </span>
                <el-date-picker v-model="year" type="year" placeholder="选择年" @change="hadnelChangeTime"></el-date-picker>
                <span style="margin: 0 10px;"> 参数 </span>
                <el-select v-model="signalCode" placeholder="请选择参数" style="width: 8vw;">
                    <el-option label="AQI" value="aqi"></el-option>
                    <el-option label="PM2.5" value="a34004"></el-option>
                    <el-option label="PM10" value="a34002"></el-option>
                    <el-option label="SO2" value="a21026"></el-option>
                    <el-option label="NO2" value="a21004"></el-option>
                    <el-option label="CO" value="a21004"></el-option>
                    <el-option label="O3" value="a05024"></el-option>
                </el-select>
                <el-button style="background-color: #43cf7c;" @click="showDialog">查 询</el-button>
            </div>
            <el-table :border="true" :data="tableData" style="width: 100%;height: 50vh;overflow: auto;margin: 15px 0;"
                v-loading="loading">
                <el-table-column label="数据时间">
                    <template slot-scope="scope">
                        <span>{{ getTime(scope.row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="等级" prop="level"></el-table-column>
                <el-table-column label="参数值" prop="signalValue"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            loading: false,
            year: "2023",
            signalCode: "aqi",
        };
    },
    props: ["areaCode"],
    methods: {
        hadnelChangeTime(date) {
            this.year = new Date(date).toLocaleDateString().substring(0, 4)
        },
        handleClose() {
            this.dialogVisible = false
        },
        getTime(row) {
            let month = parseInt(row.month) >= 10 ? row.month : "0" + row.month
            let day = parseInt(row.dataTime) >= 10 ? row.dataTime : "0" + row.dataTime
            return this.year + "-" + month + "-" + day
        },
        showDialog() {
            this.dialogVisible = true
            let params = {
                areaCode: this.areaCode,
                // 442017007 3112
                // stime: "20220231",
                // etime: "20230531",
                // dataType: 1,
                signalCode: this.signalCode,
                year: this.year
                // signalValue: 0
            }
            console.log(params);
            this.loading = true
            this.$api.get("/pollution/getPollutionCalendarData", { params }).then(res => {
                let dataList = JSON.parse(res.result)
                console.log(dataList);
                this.tableData = []
                dataList.forEach(item => {
                    item.dataList.forEach(_item => {
                        _item.month = item.month
                    })
                    this.tableData = this.tableData.concat(item.dataList)
                });
                console.log(this.tableData);
                this.loading = false
            })
        }
    }
};
</script>
<style lang="less">
.pollution-page {
    .el-dialog__body {
        padding-top: 10px;
    }

    .search-box {
        .el-button {
            width: 100px;
            height: 40px;
            margin-left: 20px;
            color: #fff;
            border-radius: 5px;

            span {
                margin: 0;
            }
        }

    }
}
</style>